<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>车辆定位</title>
	<meta name="keywords" content="">
	<meta name="description" content="">

	<link rel="shortcut icon" href="favicon.ico">
	<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="css/animate.css" rel="stylesheet">
	<link href="css/style.css?v=4.1.0" rel="stylesheet"></head>

<body class="gray-bg">
	<div class="wrapper wrapper-content">

		<div id="car_location_map" style="width:100%;height:550px;"></div>

	</div>

	<!-- 全局js -->
	<script src="js/jquery.min.js?v=2.1.4"></script>
	<script src="js/bootstrap.min.js?v=3.3.6"></script>

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ryGGzhrZxutxxgj6q4TPjUGq"></script>

	<script>
      $(document).ready(function () {
				var map = new BMap.Map("car_location_map"); // 创建Map实例
			  // 添加带有定位的导航控件
			  var navigationControl = new BMap.NavigationControl({
			    // 靠左上角位置
			    anchor: BMAP_ANCHOR_TOP_LEFT,
			    // LARGE类型
			    type: BMAP_NAVIGATION_CONTROL_LARGE,
			    // 启用显示定位
			    enableGeolocation: true
			  });
			  map.addControl(navigationControl);
        map.enableScrollWheelZoom(true);
        
				map.centerAndZoom(new BMap.Point(118.78794,31.987038), 14); // 初始化地图,设置中心点坐标和地图级别
				var data_info = [{
													lat:118.78794,
													lng:31.987038,
													carNo:"苏Axxxxx",
													driver:"张三",
													orgName:"项目1"
												},{
													lat:118.769615,
													lng:31.99252,
													carNo:"苏Axxxxx",
													driver:"李四",
													orgName:"项目2"
												},{
													lat:118.795702,
													lng:32.005442,
													carNo:"苏Axxxxx",
													driver:"王五",
													orgName:"项目3"
												}
												];
				var opts = {
										width : 250,     // 信息窗口宽度
										height: 85,     // 信息窗口高度
										title : "信息窗口" , // 信息窗口标题
										enableMessage:true//设置允许信息窗发送短息
								   };
				var myIcon = new BMap.Icon("img/car.png", new BMap.Size(32,32));				   
				for(var i=0;i<data_info.length;i++){
					var marker = new BMap.Marker(new BMap.Point(data_info[i].lat,data_info[i].lng),{icon:myIcon});  // 创建标注
					var content = "<div>车牌号："+data_info[i].carNo+"</div>";
					content += "<div>驾驶员："+data_info[i].driver+"</div>";
					content += "<div>所属项目："+data_info[i].orgName+"</div>";
					map.addOverlay(marker);               // 将标注添加到地图中
					addClickHandler(content,marker);
				};
				function addClickHandler(content,marker){
					marker.addEventListener("click",function(e){
						openInfo(content,e)}
					);
				}
				function openInfo(content,e){
					var p = e.target;
					var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
					var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
					map.openInfoWindow(infoWindow,point); //开启信息窗口
				}
     });
  </script></body>
</html>